<template>
    <div class="page-mine">
        <div class="bg"></div>
        <div class="topbar">
            <h3 class="title">我的</h3>
            <div class="icon">
                <i class="iconfont icon-tishi" @click="theme"></i>
            </div>
        </div>
        <div class="userinfo">
            <div class="avatar">
                <img :src="avatar">
                <input type="file" @change="preview1($event)" multiple="multiple" accept="image/x-png, image/jpg, image/jpeg, image/gif">
            </div>
            <div class="center">
                <div class="name">
                    <span>{{nickname}}</span>
                </div>
                <div class="user">
                    <span>{{username}}</span>
                </div>
            </div>
            <div class="right">
                <div class="edit">
                    <span>编辑</span>
                    <i class="iconfont icon-chuangzuo1"></i>
                </div>
            </div>
        </div>
        <div class="grid">
            <div class="item">
                <span class="num">{{num}}</span>
                <span class="text">我的好友</span>
            </div>
            <div class="item">
                <span class="num">{{num}}</span>
                <span class="text">我的好友</span>
            </div>
            <div class="item">
                <span class="num">{{num}}</span>
                <span class="text">我的好友</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PageMine',
    methods: {
        theme() {
            if(window.document.documentElement.getAttribute( "data-theme") == 'light') {
                window.document.documentElement.setAttribute( "data-theme",'dark');
            }else{
                window.document.documentElement.setAttribute( "data-theme",'light');
            }
        },
        preview1(e) {
            const file = e.srcElement.files[0]
            let that = this
            this.blobToDataUrl(file,function(base64Url) {
                var obj = {
                    type: 'avatar',
                    fromId: that.$store.state.userInfo.id,
                    nickname: that.$store.state.userInfo.nickname,
                    username: that.$store.state.userInfo.username,
                    token: that.$store.state.userInfo.token,
                    avatar: base64Url
                }
                var data = JSON.stringify(obj);
                that.ws.send(data);
            }) 
        },
        blobToDataUrl(blob,cb) {
            let reader = new FileReader()
            reader.onload = function(e) {
                var base64 = e.target.result
                cb(base64)
            }
            reader.readAsDataURL(blob)
        },
    },
    computed: {
        avatar() {
            return this.$store.state.userInfo.avatar
        },
        username() {
            return this.$store.state.userInfo.username
        },
        nickname() {
            return this.$store.state.userInfo.nickname
        },
        num() {
            return this.$store.state.linkList.length
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/theme.scss';
.page-mine{
    width:100vw;
    height:100vh;
    position: relative;
    z-index:2;
    @include background_color('background_color7');
    .bg{
        width:100vw;
        height:30vh;
        position: fixed;
        top:0;
        left:0;
        z-index:-1;
        @include background_color('background_color4');
    }
    .topbar{
        padding:0.625rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title{
            font-size:1rem;
            font-weight: normal;
            @include font_color('font_color7');
        }
        .icon{
            .iconfont{
                font-size:1.625rem;
                @include font_color('font_color7');
            }
        }
    }
    .userinfo{
        margin-top:3.125rem;
        width:100%;
        padding:0 1.25rem;
        display: flex;
        border-radius:1.25rem 1.25rem 0 0;
        @include background_color('background_color7');
        .avatar{
            position: relative;
            z-index:3;
            margin-right:0.625rem;
            top:-2.5rem;
            width:5rem;
            height:5rem;
            border-radius:100%;
            overflow: hidden;
            border-width:1px;
            border-style:solid;
            @include border_color('border_color2');
            img{
                width:100%;
                height:100%;
                display: block;
            }
            input{
                position: relative;
                z-index:4;
                top:-5rem;
                width:5rem;
                height:5rem;
                border-radius:100%;
                overflow: hidden;
                opacity:0;
            }
        }
        .center{
            flex:1;
            position: relative;
            top:-1.875rem;
            .name{
                font-size:1.125rem;
                margin-bottom:20px;
                @include font_color('font_color7');
            }
            .user{
                font-size:1rem;
                font-weight:600;
                @include font_color('font_color1');
            }
        }
        .right{
            position: relative;
            top:-1.5625rem;
            .edit{
                display: flex;
                align-items: center;
                span{
                    margin-right:5px;
                    @include font_color('font_color7');
                }
                .iconfont{
                    font-size:1.25rem;
                    @include font_color('font_color7');
                }
            }
        }
    }
    .grid{
        margin-top:-20px;
        display: flex;
        justify-content: space-between;
        position: relative;
        padding:0 1.25rem;
        @include background_color('background_color7');
        &::before{
            content:"";
            position: absolute;
            top:0;
            left:1.2rem;
            right:1.2rem;
            bottom:0;
            border-radius:14px;
            border-width:1px;
            border-style:solid;
            @include border_color('border_color2');
        }
        .item{
            flex:1;
            padding:20px 0;
            @include font_color('font_color1');
            text-align: center;
            &:nth-child(2){
                position: relative;
                &::before{
                    content:"";
                    position: absolute;
                    left:0;
                    top:20px;
                    width:1px;
                    height:40px;
                    background:#eee;
                }
                &::after{
                    content:"";
                    position: absolute;
                    right:0;
                    top:20px;
                    width:1px;
                    height:40px;
                    background:#eee;
                }
            }
            .num{
                display: block;
                font-weight:600;
                margin-bottom:5px;
            }
            .text{
                font-size:0.875rem;
            }
        }
    }
}
</style>